<template>
  <view class="content">
    <view>
      <button @click="createMenu">创建菜单</button>
    </view>
    <view>
      <button type="info" @click="getUserInfo">获取授权</button>
    </view>

    <view class="userInfo">
      <view>
        <image :src="userInfo.headimgurl"></image>
      </view>
      <view>{{ userInfo.nickname }}</view>
    </view>
  </view>
</template>

<script>
import http from "axios";
export default {
  data() {
    return {
      homeUrl: "http://192.168.60.230:8080/",
      APPID: "wx2188729b190d357d",
      APPSECRET: "d976b0e6262b829ba003e9a24032447c",
      userInfo: {},
    };
  },
  onLoad() {
    // 判断是否有code
    let weixinCode = this.getUrlCode("code");
    // 当获取到code后再调用获取token的方法
    weixinCode && this.getTokenFormCode(weixinCode);
  },
  methods: {
    // 创建菜单
    createMenu() {
      const ACCESS_TOKEN = uni.getStorageSync("accessToken");
      const menuObj = {
        button: [
          {
            type: "view",
            name: "测试项目",
            url: "http://192.168.60.230:8080/",
          },
        ],
      };
      // 创建菜单
      http
        .post(
          `/weixin/cgi-bin/menu/create?access_token=${ACCESS_TOKEN}`,
          menuObj
        )
        .then((res) => {
          uni.showModal({
            content: "创建成功",
          });
        });
    },
    // 点击授权按钮
    getUserInfo() {
      // 获取当前页面地址作为回调地址，并且对地址进行urlEncode处理
      let local = encodeURIComponent(this.homeUrl);
      // 获取公众号appid
      let appid = "wx2188729b190d357d";
      // 跳转到授权页面
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        local +
        "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
    },
    // 获取路径上的指定属性值
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    // 根据code获取网站授权token
    getTokenFormCode(code) {
      http
        .get(
          `/weixin/sns/oauth2/access_token?appid=${this.APPID}&secret=${this.APPSECRET}&code=${code}&grant_type=authorization_code`
        )
        .then((res) => {
          const { access_token, openid } = res.data;
          this.getAuthorizationInfo(access_token, openid);
        });
    },
    // 根据网页授权token和openid获取用户基础信息
    getAuthorizationInfo(token, openid) {
      http
        .get(
          `/weixin/sns/userinfo?access_token=${token}&openid=${openid}&lang=zh_CN`
        )
        .then((res) => {
          // 解构赋值
          const { headimgurl, nickname } = res.data;
          this.userInfo = {
            // 用户头像
            headimgurl: headimgurl,
            // 用户微信昵称
            nickname: nickname,
          };
        });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.userInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.userInfo > view:nth-child(1) {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid rgb(192, 192, 192);
}
.userInfo > view:nth-child(1) image {
  width: 100%;
  height: 100%;
  border-radius: 100px;
}
</style>
